<template>
    <div class="myform">
      <van-form validate-first @submit="onSubmit" @failed="onfail" ref="form">
        <van-field
          v-model="form.phone"
          name="phone"
          label="手机号"
          placeholder="请输入常用手机号"
          clearable
          left-icon="phone-o"
          :rules="[{ required: true, message: '请填写手机号' },{pattern:reg.phone,message:'请输入正确的手机号'}]"
        />
      <van-field
          v-model="form.captcha"
          name="captcha"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码"
          left-icon="envelop-o"
          :rules="[{ required: true, message: '请填写验证码' },{pattern:reg.code,message:'请输入正确的验证码'}]"
          >
          <template #button>
              <van-button v-if="toggle" @click="startSend" :disabled="!disabled" size="small" type="primary" native-type="button">发送验证码</van-button>
              <van-button v-else :disabled="true" size="small" type="info" native-type="button">{{count}}s后再次发送</van-button>
          </template>
      </van-field>
   
        <div class="linkitems" style="margin: 16px">
          <router-link class="cm" :to="{ name: 'register' }"
            >没有账号,去注册</router-link
          >
          <router-link class="co" :to="{ name: 'findpass' }"
            >找回密码</router-link
          >
        </div>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"
            >验证码登录</van-button
          >
        </div>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="danger"
            native-type="button"
            @click="restData"
            >重置</van-button
          >
        </div>
      </van-form>
    </div>
  </template>
  
  <script>
      let timer;
  export default {
      data(){
          return{
              form:{
  
              },
              toggle:true,
              count:10,
          }
      },
      computed:{
          disabled(){
              return this.reg.phone.test(this.form.phone)
          }
      },
      methods:{
          restData(){
              this.form={
  
              }
          },
          async onSubmit(value){
            console.log(value);
            let res = await this.$ajax.findUser({phone:this.form.phone})
              if(res.length>0){
                  let res1 = await this.$ajax.verifyCaptcha(value)  // 网易云接口
                  console.log(res1);
                  if(res1.code==200 && res1.data ==true){
                      this.changeUserInfo(res[0])
                      this.ShowSuccess("登录成功")
                      this.$router.push({name:'mine'})
                      localStorage.setItem('lgphone',value.phone)
                      localStorage.setItem("lgaccount",res[0].username)
                  }else{
                      this.ShowFail("登录失败")
                  }
              }else{
                  this.ShowFail("手机号没有注册,请先注册.")
              }
          },
          onfail(){
            this.ShowFail('校验失败')
          },
          async startSend(){
              this.timeDown()
              //发送短信
              //先判断是否注册过 注册才能发送 否则提示请注册
              let res = await this.$ajax.findUser({phone:this.form.phone})
              if(res.length>0){
                  let res1 = await this.$ajax.sendCaptcha({phone:this.form.phone})  // 网易云接口
                  console.log(res1);
                  if(res1.code==200 && res1.data ==true){
                      this.ShowSuccess("验证码发送成功")
                  }else{
                      this.ShowFail("发送失败")
                  }
              }else{
                  this.ShowFail("手机号没有注册,请先注册.")
              }
          },
          timeDown(){
              this.count--;
              this.toggle = false;
             timer = setInterval(()=>{
                 if(this.count>0){
                  this.count--;
                  this.toggle = false;
                 }else{
                  clearInterval(timer)
                  timer = null;
                  this.count = 10;
                  this.toggle = true;
                 }
              },1000)
          }
      },
      mounted(){
          if(this.$route.query.phone){
              this.form = {
                  ...this.form,
                  phone:this.$route.query.phone 
              }
          }else{
              this.form = {
                  ...this.form,
                  phone:localStorage.getItem("lgphone")
              }
          }
      },
      destroyed(){
          clearInterval(timer)
          timer = null;
      }
  }
  </script>

<style lang="scss" scoped>
.van-button--round::v-deep {
background: #ff9db5;;
border-radius: 4px;
border: 1px solid #fb7299;
}
</style>